<template>
	<!-- 推荐商品 -->
	<view class="hot">
		<view class="tit">推荐商品</view>
		<view class="goods_list" v-for="(goods) in hotGoods" v-if="searchGoods.length==0">
			<view class="goods_item" @click="toDetail(goods.id)">
				<image :src="goods.image" mode="widthFix"></image>
				<view class="price">
					<text>￥{{goods.salesprice}}</text>
					<text class="market">￥{{goods.marketprice}}</text>
				</view>
				<view class="name">
					{{goods.name}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:['num','size'],
		data(){
			return {
				hotGoods:[],
				searchGoods:[]
			}
		},	
		created() {
			console.log("商城列表子组件创建了",this.$props.num,this.$props.size);
			this.getHotGoods(this.$props.num,this.$props.size);
		},
		methods: {
			getHotGoods(pNum,pSize){
				const _this = this
				uni.request({
					url:"http://localhost:6061/goods/hot/",
					header:{
						'Authorization':uni.getStorageSync("token")
					},
					data:{
						pageNum:pNum,
						pageSize:pSize
					},
					method:"GET",
					success:(res)=> {
						console.log(res.data.data.list);
						_this.hotGoods = [..._this.hotGoods,...res.data.data.list];
					}
				})
			},
			toDetail(gid){
				console.log("商品详情",gid);
				//跳转到商品详情页面
				uni.navigateTo({
					url:"detail?id="+gid
				})
			}
		}
	}
</script>

<style>
	.hot{
			background-color: #eee;
		}
	.tit{
		height: 50px;
		line-height: 50px;
		color: #b50e03;
		text-align: center;
		letter-spacing: 20px;
		background: #fff;
		border-bottom: 2px solid #ccc;
	}
	.goods_list{
/* 		display: flex;
		//一行显示换行问题
		flex-wrap: wrap;
		//让item之间用空格隔开
		justify-content: space-between; */
		padding: 0 15px;
	}
	.goods_item{
		background-color: #FFFFFF;
		margin: 10rpx 0;
		width: 140px;
		float: left;
	}
	.goods_item image{
		width: 93%;
		display: block;
		margin: 0 auto;
	}
	.goods_item .price{
		color: #b50e03;
		font-size: 36rpx;
		margin-left: 10rpx;
		text-align: center;
	}
	.goods_item .price .market{
		color: #ccc;
		font-size: 20rpx;
		text-decoration: line-through;
		margin-left: 17rpx;
	}
	.goods_item .name{
		font-size: 28rpx;
		line-height: 40rpx;
		margin-left: 10rpx;
		height: 17px;
		overflow: hidden;
		text-align: center;
	}
</style>
